<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<jsp:include page="/includes/top.jsp"></jsp:include>
<div class="page-header">
	<h1></h1>
</div>
<!-- /.page-header -->
<div class="row">
	<div class="col-xs-12">
		<ul class="nav nav-tabs" id="myTab">
			<li class="active"><a href="#tabs-0" data-toggle="tab" data-id="0">全部任务</a></li>
			<li><a href="#tabs-1" data-toggle="tab" data-id="1">未完成的任务</a></li>
			<li><a href="#tabs-2" data-toggle="tab" data-id="2">完成的任务</a></li>
			<li><a href="#tabs-3" data-toggle="tab" data-id="3">我未完成的任务</a></li>
			<li><a href="#tabs-4" data-toggle="tab" data-id="4">我完成的任务</a></li>
			<li><a href="#tabs-5" data-toggle="tab" data-id="5">最近7天完成的任务</a></li>
		</ul>
		<div class="tab-content">
			<div id="tabs-0" class="tab-pane fade in active">
				<div class="table-responsive">
					<table id="grid-table-0"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th style="width:2%"><input type="checkbox" 
									class="checkAll ace"><span class="lbl"></span></th>
								<th style="width:20%">进度</th>
								<th>项目名称</th>
								<th>任务名称</th>
								<th style="width:25%">任务描述</th>
								<th>任务所有者</th>
								<th>开始日期</th>
								<th>完成日期</th>
								<th>期限</th>
								<th>优先级</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div id="tabs-1" class="tab-pane fade">
				<div class="table-responsive">
					<table id="grid-table-1"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th style="width:2%"><input type="checkbox" 
									class="checkAll ace"><span class="lbl"></span></th>
								<th style="width:20%">进度</th>
								<th>项目名称</th>
								<th>任务名称</th>
								<th style="width:25%">任务描述</th>
								<th>任务所有者</th>
								<th>开始日期</th>
								<th>完成日期</th>
								<th>期限</th>
								<th>优先级</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div id="tabs-2" class="tab-pane fade">
				<div class="table-responsive">
					<table id="grid-table-2"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th style="width:2%"><input type="checkbox" 
									class="checkAll ace"><span class="lbl"></span></th>
								<th style="width:20%">进度</th>
								<th>项目名称</th>
								<th>任务名称</th>
								<th style="width:25%">任务描述</th>
								<th>任务所有者</th>
								<th>开始日期</th>
								<th>完成日期</th>
								<th>期限</th>
								<th>优先级</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div id="tabs-3" class="tab-pane fade">
				<div class="table-responsive">
					<table id="grid-table-3"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th style="width:2%"><input type="checkbox" 
									class="checkAll ace"><span class="lbl"></span></th>
								<th style="width:20%">进度</th>
								<th>项目名称</th>
								<th>任务名称</th>
								<th style="width:25%">任务描述</th>
								<th>任务所有者</th>
								<th>开始日期</th>
								<th>完成日期</th>
								<th>期限</th>
								<th>优先级</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div id="tabs-4" class="tab-pane fade">
				<div class="table-responsive">
					<table id="grid-table-4"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th style="width:2%"><input type="checkbox" 
									class="checkAll ace"><span class="lbl"></span></th>
								<th style="width:20%">进度</th>
								<th>项目名称</th>
								<th>任务名称</th>
								<th style="width:25%">任务描述</th>
								<th>任务所有者</th>
								<th>开始日期</th>
								<th>完成日期</th>
								<th>期限</th>
								<th>优先级</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div id="tabs-5" class="tab-pane fade">
				<div class="table-responsive">
					<table id="grid-table-5"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th style="width:2%"><input type="checkbox" 
									class="checkAll ace"><span class="lbl"></span></th>
								<th style="width:20%">进度</th>
								<th>项目名称</th>
								<th>任务名称</th>
								<th style="width:25%">任务描述</th>
								<th>任务所有者</th>
								<th>开始日期</th>
								<th>完成日期</th>
								<th>期限</th>
								<th>优先级</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<jsp:include page="/includes/bottom.jsp"></jsp:include>

<Script type="text/javascript">
	var columns = [
						{
							"data" : "taskId",
							"fnCreatedCell" : function(nTd, sData, oData, iRow, iCol) {
								$(nTd).html("<input type='checkbox' name='checkList' value='" + sData + "' class='ace'><span class='lbl'></span>");
							}
						},
						{
							"data" : "taskPercentComplete",
							"fnCreatedCell" : function(nTd, sData, oData, iRow, iCol) {
								$(nTd).html("<div class='progress progress-striped'> "
														+ "<div class='progress-bar progress-bar-success' role='progressbar' "
														+ "aria-valuenow='"
														+ oData.taskPercentComplete
														+ "' aria-valuemin='0' aria-valuemax='100' style='width: "
														+ oData.taskPercentComplete
														+ "%;'>" + "<span >"
														+ oData.taskPercentComplete
														+ "%</span> </div></div>");
							}
						},  {
							"data" : "taskProjectName"
						},
						{
							"data" : "taskId",
							"fnCreatedCell" : function(nTd, sData, oData, iRow, iCol) {
								$(nTd).html("<a href='Task/taskDetail.jsp?m=" + mid
												+ "&id=" + oData.taskId + "'>"
												+ oData.taskName + "</a>");
							}
						},  {
							"data" : "taskDescription"
						}, {
							"data" : "taskOwnerName"
						}, {
							"data" : "taskStartDate"
						}, {
							"data" : "taskEndTime"
						}, {
							"data" : "taskDuration"
						}, {
							"data" : "taskPriorityName"
						}];
	
	$(document).ready(function() {
		$("#myTab a").click(function (e) { 
			setCookie("tasktab",$(this).attr("data-id"));
        });
		var num = getCookie("tasktab");
		$("#myTab li:eq("+num+") a").tab("show"); 
		
		//checkbox全选
	    $(".checkAll").on("click", function () {
	        var num = getCookie("tasktab");
	        num = num == "" ? 0 : num;
	        if ($(this).prop("checked")) {
	            $("#tabs-"+num+" input[name='checkList']").prop("checked", true);
	        } else {
	            $("#tabs-"+num+" input[name='checkList']").prop("checked", false);
	        }
	    });
		
		var dataMap = null;
		//所有
		$('[href^="#tabs-"]').each(function(index) {
			dataMap = {'tabid' : index};
			//参数说明：id,url,data,column,length			
			tableload("grid-table-" + index,"taskid",dataMap,columns,15);
		});
	});

	function getSelected(){
		var str = '';
		var num = getCookie("tasktab");
		num = num == "" ? 0 : num;
	    $("#tabs-"+num+" input[name='checkList']:checked").each(function () {
	        str += $(this).val();
	        str += ",";
	    });
	    str = str.substr(0, str.length - 1);
	    return str;
	}
	
	function _addFun() {
		window.open("taskform?m=" + mid, "_self");
	}
	function _editFun(){
		var str = getSelected();
		if (str != '' && str.indexOf(",") < 0) {
			window.open("taskform?m=" + mid + "&task.taskId=" + str, "_self");
		} else {
			alert("请选择一条记录操作");
		}
	}
	function _delFun(){
		var str = getSelected();
		if (str != '' && str.indexOf(",") < 0) {
			if (confirm("确定要删除数据吗？")) {
				$.ajax({
					type : "post",
					url : "deltask",
					data : {'task.taskId' : str},
					success : function(data) {
					   	showDelMessage(data);
						window.open("Task/tasklist.jsp?m=" + mid, "_self");
					}
				});
			}
		} else {
			alert("请选择一条记录操作");
		}
	}
	
</Script>
